<template>
	<view class="container">
		<u-navbar :immersive="true" :is-back="false" :background="{ background: 'rgba(0,0,0,0)' }" :border-bottom="false" title="我的" title-color="#FFFFFF"></u-navbar>
		
		<image class="user-backdrop" src="../../../static/images/bg_user-backdrop.png" mode="widthFix"></image>
		<view class="user-header">
			<image class="user-header__avatar" :src="userinfo.manage.avatar" mode="aspectFill"></image>
			<view class="user-header__content">
				{{userinfo.manage.username}}
			</view>
			<u-icon name="arrow-right" color="#FFFFFF" size="30" margin-left="20"></u-icon>
		</view>
		<view class="user-navs">
			<u-cell-group :border="false">
				<u-cell-item title="门店管理" @click="navigation('/pages/user/venueList/venueList', 1)">
					<image slot="icon" class="icon" mode="aspectFit" src="../../../static/icons/icon_user-navs1.png"></image>
				</u-cell-item>
				<u-cell-item title="教室管理" @click="navigation('/pages/user/roomList/roomList', 1)">
					<image slot="icon" class="icon" mode="aspectFit" src="../../../static/icons/icon_user-navs2.png"></image>
				</u-cell-item>
				<u-cell-item title="老师管理" @click="navigation('/pages/user/teacherList/teacherList', 1)">
					<image slot="icon" class="icon" mode="aspectFit" src="../../../static/icons/icon_user-navs3.png"></image>
				</u-cell-item>
				<u-cell-item title="课程管理" @click="navigation('/pages/user/courseList/courseList', 1)">
					<image slot="icon" class="icon" mode="aspectFit" src="../../../static/icons/icon_user-navs4.png"></image>
				</u-cell-item>
				<u-cell-item title="会员卡管理" @click="navigation('/pages/user/cardList/cardList', 1)">
					<image slot="icon" class="icon" mode="aspectFit" src="../../../static/icons/icon_user-navs5.png"></image>
				</u-cell-item>
				<!-- <u-cell-item title="体态资料" @click="navigation('/pages/manage/physicalList/physicalList', 1)">
					<image slot="icon" class="icon" mode="aspectFit" src="../../../static/icons/icon_user-navs6.png"></image>
				</u-cell-item> -->
				<!-- <u-cell-item title="退出登录">
					<image slot="icon" class="icon" mode="aspectFit" src="../../../static/icons/icon_user-navs7.png"></image>
				</u-cell-item> -->
			</u-cell-group>
		</view>
		<!-- 底部导航栏 start -->
		<wd-tabbar class="wd-tabbar" iconSize="44" :list="wd_tabbar_manage" :isTabBar="false"></wd-tabbar>
		<!-- 底部导航栏 end -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo:{
					manage:{
						avatar:'',
						username:''
					}
					
				}
			}
		},
		
		onLoad(){
			this.fetchUserinfo()
		},
		methods: {
			//获取信息
			fetchUserinfo(){
				this.$core.get({url:'fitness.manage/info',loading:false,data:{},success:(ret)=>{
					 this.userinfo = ret.data;
				}});
			},
			
			//跳转
			navigation(url, needlogin) {
				if (needlogin) {
					if (!this.$core.getUserinfo(true)) {
						return false;
					}
				}
				uni.navigateTo({
					url: url
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.user-backdrop {
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: auto;
	}
	.user-header {
		position: relative;
		display: flex;
		align-items: center;
		padding: 180rpx 30rpx 30rpx;
		&__avatar {
			display: block;
			margin-right: 20rpx;
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}
		&__content {
			flex: 1;
			line-height: 48rpx;
			font-size: 34rpx;
			color: #FFFFFF;
		}
	}
	.user-navs {
		position: relative;
		margin: 24rpx;
		padding: 0 30rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		box-shadow: 0 9rpx 22rpx 0 rgba(227,227,227,0.5);
		overflow: hidden;
		/deep/ .u-cell {
			padding: 26rpx 0;
		}
		/deep/ .u-cell_title {
			font-size: 26rpx;
			color: #333333;
		}
		.icon {
			display: block;
			margin-right: 14rpx;
			width: 28rpx;
			height: 28rpx;
		}
		&__sign {
			float: right;
			display: block;
			width: 34rpx;
			height: 34rpx;
			background: linear-gradient(131deg, #A36BFF 0%, #6D4BBE 100%);
			text-align: center;
			line-height: 34rpx;
			font-size: 24rpx;
			color: #fff;
			border-radius: 50%;
		}
	}
</style>